{% extends "_layouts/examples.html" %}
{% block title %}Table / Expanding{% endblock %}

{% block standalone_css %}patterns_table{% endblock %}

{% block content %}
<table class="p-table--expanding" aria-label="Example of expanding table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Mac address</th>
            <th>IP</th>
            <th>Rack</th>
            <th>Last seen</th>
            <th class="u-align--right">Actions</th>
            <th aria-hidden="true">
                <!-- hidden empty cell required for validation -->
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td aria-label="Name">Unknown</td>
            <td aria-label="Users">2c:44:fd:80:3f:25</td>
            <td aria-label="Units">10.249.0.1</td>
            <td aria-label="Units">karura</td>
            <td aria-label="Units">Thu, 25 Oct. 2018 13:55:21</td>
            <td class="u-align--right">
                <button class="u-toggle is-dense" aria-controls="expanded-row" aria-expanded="false" data-shown-text="Hide"
                    data-hidden-text="Show">Show</button>
            </td>
            <td id="expanded-row" class="p-table__expanding-panel" aria-hidden="true">
                <div class="row">
                    <div class="col-8">
                        <h4>Expanding table cell</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
                            nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa
                            dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td aria-label="Name">Unknown</td>
            <td aria-label="Users">52:54:00:3a:fe:e9</td>
            <td aria-label="Units">172.16.99.191</td>
            <td aria-label="Units">karura</td>
            <td aria-label="Units">Wed, 3 Oct. 2018 23:08:06</td>
            <td class="u-align--right">
                <button class="u-toggle is-dense" aria-controls="expanded-row-2" aria-expanded="false" data-shown-text="Hide"
                    data-hidden-text="Show">Show</button>
            </td>
            <td id="expanded-row-2" class="p-table__expanding-panel" aria-hidden="true">
                <div class="row">
                    <div class="col-8">
                        <h4>Expanding table cell</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
                            nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa
                            dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr>
            <td aria-label="Name">Unknown</td>
            <td aria-label="Users">52:54:00:74:c2:10</td>
            <td aria-label="Units">172.16.99.192</td>
            <td aria-label="Units">karura</td>
            <td aria-label="Units">Wed, 17 Oct. 2018 12:18:18</td>
            <td class="u-align--right">
                <button class="u-toggle is-dense" aria-controls="expanded-row-3" aria-expanded="false" data-shown-text="Hide"
                    data-hidden-text="Show">Show</button>
            </td>
            <td id="expanded-row-3" class="p-table__expanding-panel" aria-hidden="true">
                <div class="row">
                    <div class="col-8">
                        <h4>Expanding table cell</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur cum dicta beatae
                            nostrum eligendi similique earum, dolorem fuga quis, sequi voluptates architecto ipsa
                            dolorum eaque rem expedita inventore voluptas odit aspernatur alias molestias facere.</p>
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<script>
  {% include 'docs/examples/patterns/tables/_script-expanding.js' %}
</script>
{% endblock %}
